<template>
	<view class="container">
		<!-- 显示用户名 -->
		<uni-section title="用户信息" type="line">
			<uni-list border-full>
				<uni-list-item title="用户名">
					<template v-slot:footer>
						<input class="uni-input" type="text" v-model="form.username" placeholder="请输入姓名" />
					</template>
				</uni-list-item>
				<uni-list-item title="手机号">
					<template v-slot:footer>
						<input class="uni-input" type="tel" v-model="form.phone" placeholder="请输入您的手机号"
							pattern="[0-9]{11}" />
					</template>
				</uni-list-item>
			</uni-list>
		</uni-section>

		<!-- 预约入住 -->
		<uni-section title="预约入住信息" type="line">
			<uni-list border-full>
				<uni-list-item title="入住类型">
					<template v-slot:footer>
						<select placeholder="请选择入住类型" v-model="form.type" style="margin-right: 50px;width: 120px;height: 25px;border: 1px solid skyblue;">
							<option label="试住" value="10"></option>
							<option label="短期" value="20"></option>
							<option label="正式" value="30"></option>
						</select>
					</template>
				</uni-list-item>
				<uni-list-item title="入住时间">
					<template v-slot:footer>
						<uni-datetime-picker type="date" :clear-icon="false" v-model="form.checkInTime"
							@maskClick="maskClick" style="margin-right: 50px;" />
					</template>
				</uni-list-item>
				<uni-list-item title="备注">
					<template v-slot:footer>
						<input class="uni-input" type="text" v-model="form.remark" placeholder="请输入备注" />
					</template>
				</uni-list-item>
			</uni-list>
		</uni-section>

		<!-- 提交状态 -->
		<div v-if="isSubmitting" class="loading">正在预约...</div>

		<!-- 提交按钮 -->
		<button type="primary" class="submit-button" @click="submitForm" :disabled="isSubmitting || isSubmitted">
			{{ isSubmitted ? '已预约' : isSubmitting ? '预约中...' : '预约' }}
		</button>
	</view>
</template>

<script>
	import {ref,onMounted} from "vue";
	import { addAppointment } from "../appointment/api/appointmentService.js";
	import qs from "qs";

	export default {

		setup() {
			const form = ref({
				type: '',
				checkInTime: '',
				remark: '',
				username: '',
				phone: '',
				userId: ''
			});

			const username = ref(''); // 存储用户名
			const phone = ref(''); // 存储电话号
			const userId = ref(''); // 存储用户id
			const remark = ref('');
			const type = ref('');
			const checkInTime = ref('');
			const isSubmitting = ref(false); // 提交中的状态
			const isSubmitted = ref(false); // 是否已提交的状态

			onMounted(() => {
				// 获取本地存储中的用户信息
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					userId.value = userInfo.ownerId || ''; // 设置用户id
					form.value.userId = userId.value; // 将用户id填入表单 

					username.value = userInfo.username; // 设置用户名
					form.value.username = username.value; // 将用户名填入表单

					phone.value = userInfo.phone; // 设置电话号
					form.value.phone = phone.value; // 将电话号填入表单

					remark.value = userInfo.remark;
					form.value.remark = remark.value;

					cheakInTime.value = userInfo.cheakInTime;
					form.value.cheakInTime = cheakInTime.value;

					type.value = userInfo.type;
					form.value.type = type.value;
					
					console.log('用户ID:',userId.value);
					console.log('用户名:', username.value);
					console.log('电话号:', phone.value);
					console.log('房间类型:', type.value);
					console.log('入住时间:', cheakInTime.value);
					console.log('备注:', remark.value);
				}
			});

			// 提交表单数据
			const submitForm = async () => {
				if (isSubmitting.value || isSubmitted.value) return; // 防止重复提交
				console.log(form.value);
				// isSubmitting.value = true;

				// 发送请求前验证表单
				if (isFormValid()) {
					try {
						const info=qs.stringify(form.value);
						const res = await addAppointment(info); // 提交预约信息
						console.log('预约成功:', res);

						uni.showToast({
							title: '预约成功',
							icon: 'success',
							duration: 2000
						});

						isSubmitted.value = true; // 设置已提交状态
					} catch (error) {
						console.error('预约失败:', error);
						uni.showToast({
							title: '预约失败，请稍后再试',
							icon: 'none',
							duration: 2000
						});
					} finally {
						isSubmitting.value = false;
					}
				} else if (!form.value.username) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 2000
					});
				} else if (form.value.phone.length !== 11) {
					uni.showToast({
						title: '请填写正确的手机号',
						icon: 'none',
						duration: 2000
					});
				} else {
					const info = qs.stringify(form.value);
					const res = await addAppointment(info); // 提交预约信息
					console.log('预约成功:', res);
					form.value = {};
					uni.showToast({
						title:'预约成功',
						icon:'success',
						duration:2000
					});
					uni.navigateTo({
						url:'/pages/appointment/appointmentdetails'
					})
				}
			};
			// 验证表单数据
			const isFormValid = () => {
				const {
					type,
					cheakInTime,
					remark,
					username,
					phone
				} = form.value;
				return type && cheakInTime && remark && username && phone == 11;
			};

			return {
				form,
				username,
				isSubmitting,
				isSubmitted,
				submitForm
			};

		}
	};
</script>

<style scoped>
	.container {
		max-width: 600px;
		margin: auto;
		padding: 20px;
	}

	.submit-button {
		background-color: #007bff;
		color: #fff;
		border: none;
		border-radius: 4px;
		padding: 10px 20px;
		cursor: pointer;
		font-size: 16px;
		width: 100%;
		margin-top: 20px;
	}

	.loading {
		color: #007AFF;
		font-size: 16px;
		margin-top: 10px;
		text-align: center;
	}
</style>